<template>
    <view>
        <view class="agreement" @click="agreeDoc">
            <view class="checkbox">
                <checkbox style="zoom: 0.6" :checked="agreeFlag"/>
            </view>
            <view v-if="hasArtId">
                <text>我已阅读</text>
                <view style="display: inline; color: #409eff">
                    <slot></slot>
                </view>
            </view>
            <view v-else @click.stop="toWebview" style="color: #409eff">
                <slot></slot>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { getSuggestArticlePage } from '@/api/base'
import { useStore } from 'vuex'

const Store = useStore()

// 定义props
const props = defineProps({
    type: {
        type: String,
        default: '-1'
    },
    hasArtId: {
        type: Boolean,
        default: false
    },
    modelValue: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ''
    }
})

// 定义emit
const emit = defineEmits(['update:modelValue'])

// 复选框状态
const agreeFlag = ref(props.modelValue)

// 监听props和内部状态变化
watch(() => props.modelValue, (val) => {
    agreeFlag.value = val
})

watch(() => agreeFlag.value, (val) => {
    emit('update:modelValue', val)
})

// 点击复选框
const agreeDoc = () => {
    console.log('222222');

    agreeFlag.value = !agreeFlag.value
}

// 查看协议
const toWebview = () => {
    getSuggestArticlePage({
        pageIndex: 1,
        pageSize: 1,
        type: props.type
    }).then(res => {
        let item = res.data.list && res.data.list[0]
        if(item) {
            uni.navigateTo({
                url: '/pages/article/article?artId=' + item.id + '&title=' + props.title
            })
        } else {
            uni.showToast({
                title: '暂时没有找到相关协议',
                icon: 'none'
            })
        }
    })
}
</script>

<style lang="scss" scoped>
.agreement{
    padding: 0 30rpx;
    // @include align(v-center);
    display: flex;
    flex-wrap: nowrap;
    margin-top: 10rpx;
    min-height: 50rpx;
    font-size: 24rpx;
    .checkbox{
        width: 40rpx;
        height: 40rpx;
        // background: orange;
        flex-shrink: 0;
        checkbox{
            zoom: 0.8;
        }
    }
    span{
        color: $baseColor;
    }
}

</style>
